<template>
	<view class="page">
		<view class="body">
			<view class="body_title">
				充值金额
			</view>
			<view class="body_money justify-content-start">
				<view class="">
					￥
				</view>
				<input v-model="money" border="none" clearable placeholder="请输入金额"></input>
			</view>
			<view class="body_cont">
				<view class="body_cont_gird ">
					<view class="body_cont_gird_" v-for="(item,index) in list" :key="item.index"
						:class="list_index ==item.id?'choose':''" @click="choose_index(item)">
						<view class="body_cont_gird_fir">
							{{item.text}}元
						</view>
						<view class="body_cont_gird_se">
							售价{{item.value}}
						</view>
					</view>
				</view>
			</view>
			<view class="pay_way">
				<view class="pay_way_title">
					支付方式
				</view>
				<view class="pay_way_list">
					<uni-data-checkbox v-model="value" :localdata="pay_way_List" @change="change"></uni-data-checkbox>
				</view>
			</view>
		</view>
		<view class="btn" @click="recharge">
			立即充值
		</view>
	</view>
</template>

<script>
	import {
		getRecharge,
		rechargeSubmit
	} from '../../api/trade/index.js'
	export default {
		data() {
			return {
				money: '', //充值金额
				list: [],
				list_index: '',
				pay_way_List: [{
						id: 0,
						icon: '/static/purse/wx.png',
						value: 0,
						bank_type: 1,
						type: 'wechat'
					},
					{
						id: 1,
						icon: '/static/purse/zfb.png',
						value: 1,
						bank_type: 2,
						type: 'alipay'
					}
				],
				value: 0,
				type: 'wechat'
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			// 获取账户列表
			init() {
				getRecharge().then(res => {
					this.list = res.data.moneylist;
				})
			},
			// 选择金额
			choose_index(e) {
				this.money = e.value;
				this.list_index = e.id;
			},
			// 支付方式
			change(e) {
				this.value = e.detail.value;
				this.type = e.detail.data.type;
				console.log(123, this.type);
			},
			// 立即充值
			recharge() {
				var id = this.list[this.list_index].id;
				var data = {
					money: this.money,
					paytype: this.type
				};
				rechargeSubmit(data).then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {

		.body {
			font-size: 16px;

			.body_money {
				font-size: 15px;
				border-bottom: 1px solid #b2b2b2;
				padding: 20rpx 0;
			}
		}

		.body_cont {
			.body_cont_gird {
				border: 1px solid #b2b2b2;
				display: flex;
				flex-wrap: wrap;
				border-radius: 15rpx;
				margin-top: 50rpx;
				padding: 20rpx 10rpx;

				.choose {
					background-color: #fcebeb;
				}

				.body_cont_gird_ {
					border: 1px solid #FEC1A7;
					width: calc(100% / 3);
					height: calc(100% / 2);
					width: 96px;
					height: 60px;
					box-sizing: border-box;
					border-radius: 15rpx;
					margin: 5px;
					padding: 20rpx;
					color: #FC4522;
					text-align: center;

					.body_cont_gird_fir {
						font-size: 18px;
						font-weight: 550;
					}

					.body_cont_gird_se {
						margin-top: 5rpx;
						font-size: 12px;
					}
				}
			}
		}

		.pay_way {
			margin-top: 50rpx;

			.pay_way_title {
				font-size: 16px;
				font-weight: 550;
			}

			.pay_way_list {
				margin-top: 20rpx;
			}
		}

		.btn {
			color: white;
			text-align: center;
			background-color: #fe6939;
			padding: 20rpx 30rpx;
			margin: 0 50rpx;
			margin-top: 100rpx;
			border-radius: 50rpx;
		}
	}
</style>